<template>
    <div style="height:100%;width:100%;text-align:left;">
        <!--<div ref="basicMapbox" :style="mapSize"></div>-->
        <div ref="basicMapbox" style="position:absolute; width: 100%; top: 64px; bottom: 0px"></div>
    </div>
</template>
<script>
    import mapboxgl from "mapbox-gl"
    import MapboxLanguage from '@mapbox/mapbox-gl-language'

    export default {
        props: {
            mapWidth: {
                type: String
            },
            mapHeight: {
                type: String
            }
        },
        data() {
            return {}
        },
        mounted() {
            this.init()
        },
        methods: {
            // 初始化
            init() {
                mapboxgl.accessToken = 'pk.eyJ1IjoibGl5dWV5aSIsImEiOiJjanpkZmh1aGswMW91M3Bsa2ZxZmFpNGtjIn0.3O_iLJM7u3UyEyGBVKt1ug'
                const map = new mapboxgl.Map({
                    container: this.$refs.basicMapbox,
                    //style: 'mapbox://styles/mapbox/streets-v9',
                    // center: [-73.95, 40.78],
                    // zoom: 15,
                    // pitch: 45,
                    // bearing: -17.6,
                    // center: [121.64, 29.70],
                    // zoom: 10,

                });
                // 设置语言
                var language = new MapboxLanguage({defaultLanguage: "zh"});
                map.addControl(language);
                // 地图导航
                var nav = new mapboxgl.NavigationControl();
                map.addControl(nav, "top-left");
                // 比例尺
                var scale = new mapboxgl.ScaleControl({
                    maxWidth: 80,
                    unit: "imperial"
                });
                map.addControl(scale);
                scale.setUnit("metric");
                // 全图
                map.addControl(new mapboxgl.FullscreenControl());
                // 定位
                map.addControl(
                    new mapboxgl.GeolocateControl({
                        positionOptions: {
                            enableHighAccuracy: true
                        },
                        trackUserLocation: true
                    })
                );

                map.on('load', function () {
                        // map.addSource('test', {
                        //     type: 'geojson',
                        //     data: 'http://192.168.1.110:9000/dbfg/tileservice/yyyhh/geojson/12/003432/002404'
                        // });

                        map.addLayer({
                            "id": "test",
                            "type": "fill",
                            "source": {
                                "type": "vector",
                                "scheme":"tms",
                                "tiles": ["http://192.168.1.110:9000/dbfg/tileservice/yyyhh/geojson/12/003432/002404"],
                            },
                            "source-layer": "test",
                            "paint": {
                                "fill-color":"#088",
                                "fill-opacity":0.8
                            }
                        });
                    }
                );

                console.log(map)
            }
        },
        computed: {
            mapSize() {
                let styleObj = {
                    width: this.mapWidth,
                    height: this.mapHeight
                }
                return styleObj
            }
        }
    }
</script>

<style>
    @import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');

    .map-overlay {
        font: bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
        position: absolute;
        width: 15%;
        top: 0;
        left: 3%;
        padding: 10px;
    }

    .map-overlay .map-overlay-inner {
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
        border-radius: 3px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .map-overlay label {
        display: block;
        margin: 0 0 10px;
    }

    .map-overlay input {
        background-color: transparent;
        display: inline-block;
        width: 100%;
        position: relative;
        margin: 0;
        cursor: ew-resize;
    }

    .map-overlay-inner fieldset {
        border: none;
        padding: 0;
        margin: 0 0 10px;
    }

    .map-overlay-inner fieldset:last-child {
        margin: 0;
    }

    .map-overlay-inner select {
        width: 100%;
    }

    .map-overlay-inner label {
        display: block;
        font-weight: bold;
        margin: 0 0 5px;
    }

    .map-overlay-inner button {
        display: inline-block;
        width: 36px;
        height: 20px;
        border: none;
        cursor: pointer;
    }

    .map-overlay-inner button:focus {
        outline: none;
    }

    .map-overlay-inner button:hover {
        box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.10);
    }

</style>